<!--
 * @Description:鼠标跟随div
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 20:09:25
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>鼠标跟随div</title>
	<style>
		#div1 {
			width: 20px;
			height: 20px;
			background: #ccc;
			position: absolute;
		}
	</style>

</head>
<script>
	window.onload = function () {
		function getPos(ev) {
			var scrollTop = document.documentElement.scrollTop ||
				document.body.scrollTop
			var scrollLeft = document.documentElement.scrollLeft ||
				document.body.scrollLeft
			return {
				x: ev.clientX + scrollLeft,
				y: ev.clientY + scrollTop
			}
		}

		document.onmousemove = function (ev) {
			var oDiv = document.getElementsByTagName('div')
			var oEvent = ev || event
			var pos = getPos(oEvent)
			for (var i = oDiv.length - 1; i > 0; i--) {
				oDiv[i].style.left = oDiv[i - 1].offsetLeft + 'px';
				oDiv[i].style.top = oDiv[i - 1].offsetTop + 'px';
			}
			oDiv[0].style.left = pos.x + 'px'
			oDiv[0].style.top = pos.y + 'px'
			// var oBtn = document.getElementById("btn1")
			// var oDiv = document.getElementById("div1")
			// var oEvent = ev || event
			// var pos = getPos(oEvent )

			// oDiv.style.left = pos.x+ 'px'
			// oDiv.style.top = pos.y+ 'px'
		}

	}
</script>

<body>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>
	<div id="div1"></div>

</body>

</html>